<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px">
      <n-form class="w-full" size="small" inline label-width="80">
        <n-form-item label="产生时间:" label-placement="left">
          <n-date-picker
            v-model:value="range"
            type="datetimerange"
            clearable
            :default-time="['00:00:00', '00:00:00']"
          />
        </n-form-item>
        <n-form-item label="LOT号:" label-placement="left">
          <n-input v-model:value="selectedLot" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="车间:" label-placement="left" style="width: 200px">
          <n-select
            v-model:value="selectedAreas"
            clearable
            multiple
            label-field="areaname"
            value-field="areaname"
            :options="areas"
          />
        </n-form-item>

        <n-form-item label="工序:" label-placement="left" style="width: 200px">
          <n-select
            v-model:value="selectedProcessoperationNames"
            multiple
            clearable
            :options="processOperations"
            :render-label="poRenderLabel"
          />
        </n-form-item>
        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getProAlarmList">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
      <n-form class="w-full" size="small" inline label-width="80">
        <n-form-item label="料号:" label-placement="left">
          <n-input v-model:value="productspecName" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="负责人:" label-placement="left">
          <n-input v-model:value="manager" type="text" placeholder="模糊查询" />
        </n-form-item>
      </n-form>

      <n-divider />
      <vxe-grid v-bind="proAlarmOptions"></vxe-grid>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchAreaList, fetchProcessopetationspec, fetchCustomQuery } from '@/service/api';

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);
const selectedLot = ref('');
const areas = ref<Factory.Area[]>([]);
const productspecName = ref('');
const manager = ref('');

const processOperations = ref<Array<SelectOption>>([]);

const selectedAreas = ref([]);
const selectedProcessoperationNames = ref([]);

const getAreaList = async () => {
  const result = await fetchAreaList();
  if (result.data) {
    areas.value = result.data;
  }
};

const getProcessoperationSpec = async () => {
  const result = await fetchProcessopetationspec();
  if (result.data) {
    const processoperationSpecList: Array<SelectOption> = [];
    result.data.forEach(element => {
      const temp: SelectOption = {
        label: element.description,
        value: element.processoperationname
      };
      processoperationSpecList.push(temp);
    });
    processOperations.value = processoperationSpecList;
  }
};

onMounted(async () => {
  getAreaList();
  getProcessoperationSpec();
});

const proAlarmOptions = reactive<VxeGridProps>({
  border: true,
  // height: 300,
  size: 'mini',
  maxHeight: '550px',
  showFooter: false,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'ALARMID',
      title: '异常编号',
      width: '110px',
      showOverflow: true
    },
    {
      field: 'ALARMACTIONCODE',
      title: '车间',
      width: '110px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PRODUCT',
      title: 'LOT号',
      width: '150px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PRODUCTSPECNAME',
      title: '料号',
      width: '180px',
      sortable: true,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'UNITNAME',
      title: '工序',
      width: '80px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'ACTIN',
      title: '投入数',
      width: '80px'
    },
    {
      field: 'ACTOUT',
      title: '合格数',
      width: '80px'
    },
    {
      field: 'ALARMTEXT',
      title: '异常说明',
      width: '260px',
      showOverflow: true
    },
    {
      field: 'CREATETIME',
      title: '产生时间',
      sortable: true,
      width: '150px'
    },
    {
      field: 'LASTEVENTTIME',
      title: '最后处理时间',
      sortable: true,
      width: '150px'
    },
    {
      field: 'EVENTCOMMENT',
      title: '释放冻结Lot说明',
      showOverflow: true,
      width: '350px'
    },
    {
      field: 'REASONCODETYPE',
      title: '归责',
      width: '70px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'REASONCODEGROUP',
      title: '负责人类别',
      width: '180px',
      showOverflow: true,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'USERNAME',
      title: '最后操作人',
      width: '120px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    { field: 'LINSHI', title: '临时措施', width: '150px', showOverflow: true },
    { field: 'XIANGYIN', title: '原因分析', width: '150px', showOverflow: true },
    { field: 'GAISHAN', title: '改善措施', width: '150px', showOverflow: true },
    { field: 'JIEAN', title: '结案说明', width: '150px', showOverflow: true },
    { field: 'COMPLETED', title: '是否结案', width: '90px' }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const poRenderLabel = (option: SelectOption) => {
  return `${option.value} - ${option.label}`;
};

const getProAlarmList = async () => {
  const queryVm: MES.QueryVM = {
    queryId: 'GetAlarmDataForReport',
    version: '00001',
    data: {
      STARTTIME: dayjs(range.value[0]).format('YYYYMMDDHHmmss'),
      ENDTIME: dayjs(range.value[1]).format('YYYYMMDDHHmmss'),
      AREANAME: selectedAreas.value.join(','),
      PROCESSOPERATIONNAME: selectedProcessoperationNames.value.join(','),
      PRODUCTSPECNAME: productspecName.value ? `%${productspecName.value}%` : null,
      LOTNAME: selectedLot.value ? `%${selectedLot.value}%` : null,
      USERNAME: manager.value ? `%${manager.value}%` : null
    }
  };

  const result = await fetchCustomQuery(queryVm);
  if (result.data) {
    proAlarmOptions.data = result.data;
  }
};
</script>
